<template>
  <view class="normal-login-container">
    <public-loading></public-loading>
<!--    首页-->
    <template v-if="tabIndex==0">
      <Home></Home>
    </template>
<!--    商城-->
    <template v-if="tabIndex==1">
      <Mall></Mall>
    </template>
<!--    订单-->
    <template v-if="tabIndex==3">
      <Order></Order>
    </template>
<!--    我的-->
    <template v-if="tabIndex==4">
      <My ref="minePageRef"></My>
    </template>
    <!-- 洗涤 预约上门 物流到店 预约衣柜 蒙版层-->
    <bottom-select v-model:modelValue="isWashMask" :btnList="washBtn" @click="onWashBtnClick"></bottom-select>
    <tab-options :i="tabIndex" v-if="tabIndex!=3" @click="onTabClick" @midClick="onTabWashClick"></tab-options>
    <tab-options-other v-if="tabIndex==3" @click="onTabClick" @midClick="onTabWashClick"></tab-options-other>
  </view>
</template>

<script lang="ts" setup>
import { onShareAppMessage } from '@dcloudio/uni-app'
import { ref,getCurrentInstance } from 'vue'
import {storeDetailsId} from '@/api/pagesShop/index'
import {commonStore} from "@/stores/common.js"
import {useCustomStores} from '@/utils/hook'
import Mall from "../components/mall.vue";
import My from "../components/my.vue"
import Home from "../components/home.vue";
import Order from "../components/order.vue";
const { proxy } = getCurrentInstance()
const {ShopStore} = useCustomStores()

/***********data**************/
const tabIndex = ref(0)
const isWashMask= ref(false)
const isDoorvisit= ref(false)
const washBtn = ref(['预约上门','物流到店','预约衣柜'])
const CommonStore = commonStore()
// const {shopStoreIndex} = CommonStore
/***********fun**************/
const onTabClick = (index: number) => {
  if(index===0){
    tabIndex.value = index
    return
  }
  proxy.$checkLoginAndExecute(() => {
    tabIndex.value = index
  })

}

const onTabWashClick=()=>{
  console.log('点击了',CommonStore.shopStoreIndex)
  const {shopStoreIndex} = CommonStore
  if(!shopStoreIndex.id){
    uni.showToast({
      title: '当前附件没有洗衣店',
      icon: 'none',
      duration: 2000
    })
    return
  }
  storeDetailsId(shopStoreIndex.id).then(res=>{
    ShopStore.setShopInfo({
      ...res,
    })
    uni.navigateTo({
      url: '/pages/cleaningOrder/index?storeId='+shopStoreIndex.storeId
    })
  })
  // isWashMask.value = !isWashMask.value
  // isDoorvisit.value = false
}
onShareAppMessage(() => {
  return {
    title: '河马智洗', // 分享标题
    path: '/pages/index/index', // 分享路径，通常是首页或带参数的页面
  }
})
</script>

<style lang="scss">
page {
  background-color: unset;
}

.normal-login-container {
  width: 100%;

  .logo-content {
    padding-top: 48rpx;

    .title {
      margin-left: 32rpx;
      color: #222;
      font-size: 44rpx;
      font-weight: bold;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 72rpx auto;
    margin-top: 15%;
    width: 90%;

    .input-item {
      margin: 32rpx auto;
      background-color: #f5f6f7;
      height: 88rpx;
      border-radius: 44rpx;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 32rpx;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }

      .inputplaceholder {
        color: #999;
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}

.xieyi {
  color: #999;
  margin: 32rpx 32rpx;

  .text-grey1 {
    margin-left: 16rpx;
  }

  .text-blue {
    color: #0080ff;
  }
}

.bottom-wx {
  position: fixed;
  bottom: 100rpx;
  width: 750rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .three {
    text-align: center;

    .left {
      width: 180rpx;
      height: 1rpx;
      position: absolute;
      top: 22rpx;
      left: 100rpx;
      background-color: #999;
    }

    .right {
      width: 180rpx;
      height: 1rpx;
      position: absolute;
      top: 22rpx;
      right: 100rpx;
      background-color: #999;
    }
  }

  .wx {
    width: 88rpx;
    height: 88rpx;
    margin-top: 33rpx;
    position: relative;

    image {
      width: 88rpx;
      height: 88rpx;
    }

    .wx-btn {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;

      button {
        background-color: transparent;
        width: 88rpx;
        height: 88rpx;
      }

      button::after {
        border: none;
      }
    }
  }
}

// .co-popup{
// 	z-index: 999;
// 	.phone-box{
// 		width: 80%;
// 		border-radius: 20rpx;
// 		background-color: #FFFFFF;
// 		z-index: 9999;
// 		.title{
// 			font-size: 36rpx;
// 			text-align: center;
// 			font-weight: bold;
// 			margin-top: 20rpx;
// 		}
// 		.cont{
// 			font-size: 28rpx;
// 			text-align: center;
// 			margin-top: 20rpx;
// 			color: #ABABAB;
// 		}
// 		button{
// 			width: 80%;
// 			margin-top: 40rpx;
// 			margin-bottom: 30rpx;
// 			color: #44557B;
// 			font-weight: bold;
// 		}
// 	}
// }
</style>
